<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <style>
        .red-background {
            background-color: red;
        }
    </style>

</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        function formatUser(user) {
            return user.firstName + "==" + user.lastName
        }
        const user = {
            firstName: "Alice",
            lastName: 'Robert'
        }
        const element = <h2>{formatUser(user)}</h2>
        ReactDOM.render(
            element,
            document.getElementById('app')
        );

        //
        const user1 = undefined
        function greetingUser(user) {
            if (user) {
                return <h1>Hello ,{user.firstName}=={user.lastName}</h1>
            } else {
                return "Stranger"
            }
        }
        ReactDOM.render(greetingUser(user), document.getElementById("app"))


    // jsx 接近 javascript ,属性均变成驼峰命名，class -> className
        const redBgElement = <h1 className="red-background">Red background element!</h1>
        ReactDOM.render(redBgElement,document.getElementById("app"))
    </script>
</body>

</html>